<template >
  <div class="head-title home"   ref = 'navItem'>

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item,index) in images" :key="index">
        <img v-lazy="item.url" class="imagess" />
      </van-swipe-item>
    </van-swipe>

    <van-swipe @change="onChange">
      <van-swipe-item>
        <van-row type="flex" class="nav-icon">
          <van-col span="6" v-for="(item,index) in this.CategorOne" :key="index">
            <router-link :to="{path:'/overWorkList', query: {id:item.id,title:item.name}}">
              <img  :src= item.iconUrl  class="navocon"  />
              <span class="icon-name">{{item.name}}</span>
            </router-link>
          </van-col>
        </van-row>

         <van-row type="flex" class="nav-icon">
          <van-col span="6" v-for="(item,index) in this.CategorTwo" :key="index">
            <router-link :to="{path:'/overWorkList', query: {id:item.id}}">
                <img  :src= item.iconUrl  class="navocon"  />
              <span class="icon-name">{{item.name}}</span>
            </router-link>
          </van-col>
        </van-row>      
      </van-swipe-item>

      <van-swipe-item>
        <van-row type="flex" class="nav-icon">
          <van-col span="6" v-for="(item,index) in this.CategorTHre" :key="index">
            <router-link :to="{path:'/overWorkList', query: {id:item.id}}">
               <img  :src= item.iconUrl  class="navocon"  />
              <span class="icon-name">{{item.name}}</span>
            </router-link>
          </van-col>
        </van-row>

          <van-row type="flex" class="nav-icon">
          <van-col span="6" v-for="(item,index) in this.CategorFour" :key="index">
            <router-link :to="{path:'/overWorkList', query: {id:item.id}}">
               <img  :src= item.iconUrl  class="navocon"  />
              <span class="icon-name">{{item.name}}</span>
            </router-link>
          </van-col>
        </van-row>
        
      </van-swipe-item>

    </van-swipe>

    <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">初信</span>
      </van-col>
    </van-row>

    <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList01" :key ='index'>
        <router-link :to="{path:'/overWorkNote', query: {ID:item.id,From:'Home'}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>

      <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">福音证道</span>
      </van-col>
    </van-row>

      <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList02" :key ='index'>
        <router-link :to="{path:'/overWorkNote', query: {ID:item.id}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>

      <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">福音电影</span>
      </van-col>
    </van-row>

    <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList03" :key ='index'>
      <router-link :to="{path:'/overWorkNote', query: {ID:item.id,From:'Home'}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>

      <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">赞美</span>
      </van-col>
    </van-row>

     <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList04" :key ='index'>
        <router-link :to="{path:'/overWorkNote', query: {ID:item.id,From:'Home'}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>

      <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">家庭</span>
      </van-col>
    </van-row>

    <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList05" :key ='index'>
        <router-link :to="{path:'/overWorkNote', query: {ID:item.id,From:'Home'}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>

      <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">儿童</span>
      </van-col>
    </van-row>

    <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList06" :key ='index'>
       <router-link :to="{path:'/overWorkNote', query: {ID:item.id,From:'Home'}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>

      <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">纪录片</span>
      </van-col>
      <!-- <van-col span="12" class="lineText_Right">
        <icon name="more" :w="20" :h="20"></icon>
      </van-col> -->
    </van-row>

    <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList07" :key ='index'>
        <router-link :to="{path:'/overWorkNote', query: {ID:item.id,From:'Home'}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>

      <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">福音见证</span>
      </van-col>
    </van-row>

     <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList08" :key ='index'>
       <router-link :to="{path:'/overWorkNote', query: {ID:item.id,From:'Home'}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>

      <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">主日学</span>
      </van-col>
    </van-row>

     <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList09" :key ='index'>
        <router-link :to="{path:'/overWorkNote', query: {ID:item.id,From:'Home'}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>

      <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">神学</span>
      </van-col>
    </van-row>

     <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList10" :key ='index'>
       <router-link :to="{path:'/overWorkNote', query: {ID:item.id,From:'Home'}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>

      <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">诗歌</span>
      </van-col>
    </van-row>

   <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList11" :key ='index'>
        <router-link :to="{path:'/overWorkNote', query: {ID:item.id,From:'Home'}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>

      <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">特会</span>
      </van-col>
    </van-row>

      <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList12" :key ='index'>
        <router-link :to="{path:'/overWorkNote', query: {ID:item.id,From:'Home'}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>


     <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">精读圣经</span>
      </van-col>
    </van-row>

     <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList13" :key ='index'>
        <router-link :to="{path:'/overWorkNote', query: {ID:item.id,From:'Home'}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>

    <van-row class="lineText">
      <van-col span="12" class="lineText_left">
        <span class="TextL">程蒙恩</span>
      </van-col>
    </van-row>

    <van-row type="flex" class="nav_item" >
      <van-col span="12" v-for ="(item,index) in HomePagList14" :key ='index'>
        <router-link :to="{path:'/overWorkNote', query: {ID:item.id,From:'Home'}}">
          <img :src="item.playbill_url" class="iconlogo"  :style="{ width:widths  + 'px' , height : 100 + 'px'  }"  />
          <span class="iconame">{{item.title}}</span>
        </router-link>
      </van-col>
    </van-row>

    <router-link :to="{path:'/Donation'}">
    <van-row class="lineText Donation">
      <van-col span="24" class="lineText_Donation">
        <span class="text_Donation">奉献捐赠</span>
      </van-col>
    </van-row>
    </router-link>

    <div class="endFooter">
      <!-- <span>--我也是有底线的--</span> -->
    </div>
  </div>
</template>

<script>

import Vue from "vue";

import { Lazyload } from "vant";

import { Toast } from 'vant';

Vue.use(Lazyload);

export default {

  data() {
    return {

      Icon_logo_url: require("@/assets/Image/chutyin01.png"),
      Icon_logo_url01: require("@/assets/Image/chutyin02.png"),
      images: [],
      CategorOne: [],//页面分类的数据01
      CategorTwo: [],//页面分类的数据02
      CategorTHre: [],//页面分类的数据03
      CategorFour: [],//页面分类的数据04
      NavImage:'',
      widths:'',
      HomePagList01:[],//页面2个分类的数据01
      HomePagList02:[],
      HomePagList03:[],   /* */
      HomePagList04:[],
      HomePagList05:[],
      HomePagList06:[],
      HomePagList07:[],
      HomePagList08:[],
      HomePagList09:[],
      HomePagList10:[], 
      HomePagList11:[],
      HomePagList12:[],
      HomePagList13:[], 
      HomePagList14:[],   /* 页面2个分类的数据14*/
    };
  },

  methods: {
    //跳转到内页
    // go() {
    //   this.$router.push("./HomeNotePg");n
    // },
    
    onChange(index) {
      // Toast("当前 Swipe 索引：" + index);
    },

    //跳转到list页面
    giList(){
       this.$router.push({
            path: "/overWorkList",
            query: {
            // ID:this.list[index].id,
            // name:this.list[index].name
            //   categoryTitle:this.title
            }
      });
    },

    //初始化请求banneer
    GetBannerList() {
      this.$axios({
        method: "get",
        url: "/api/User/GetBannerList"
      })
        .then(res => {
          // debugger
          if (res.data.code === 0) {
            // debugger
            //  console.log(res.data.data);
            this.images = res.data.data;
            console.log(this.images);
            // this.$toast({
            //   duration: 800,
            //   message: "数据已删除"
            // });
          }
          if (res.data.Code == 1) {
            this.$toast({
              duration: 800,
              message: res.data.Message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取文件列表信息/api/User/GetFileInfoHomePageList
    //初始化请求banneer
    GetFileInfoHomePageList() {
      this.$axios({
        method: "get",
        url: "/api/User/GetFileInfoHomePageList",
        params: {
          churchID: 0
        }
      })
        .then(res => {
          // debugger
          if (res.data.code === 0) {
            // debugger
            console.log(res.data.data);
            for(let i=0; i<res.data.data.length;i++ ){
              console.log(res.data.data[i].categoryID);
               if(res.data.data[i].categoryID == 1){
               this.HomePagList01.push(res.data.data[i])
               }
               if(res.data.data[i].categoryID == 2){
               this.HomePagList02.push(res.data.data[i])
               }
               if(res.data.data[i].categoryID == 3){
               this.HomePagList03.push(res.data.data[i])
               }
               if(res.data.data[i].categoryID == 4){
               this.HomePagList04.push(res.data.data[i])
               }
               if(res.data.data[i].categoryID == 5){
               this.HomePagList05.push(res.data.data[i])
               }
               if(res.data.data[i].categoryID == 6){
               this.HomePagList06.push(res.data.data[i])
               }
               if(res.data.data[i].categoryID == 7){
               this.HomePagList07.push(res.data.data[i])
               }
               if(res.data.data[i].categoryID == 8){
               this.HomePagList08.push(res.data.data[i])
               }
               if(res.data.data[i].categoryID == 9){
               this.HomePagList09.push(res.data.data[i])
               }
               if(res.data.data[i].categoryID == 10){
               this.HomePagList10.push(res.data.data[i])
               }
               if(res.data.data[i].categoryID == 11){
               this.HomePagList11.push(res.data.data[i])
               }
               if(res.data.data[i].categoryID == 12){
               this.HomePagList12.push(res.data.data[i])
               }
               if(res.data.data[i].categoryID == 13){
               this.HomePagList13.push(res.data.data[i])
               }
               if(res.data.data[i].categoryID == 14){
               this.HomePagList14.push(res.data.data[i])
               }

            }
            // console.log(res.data.data[i].categoryID);
           
            //  this.images = res.data.data;
            //  console.log(this.images);
            // this.$toast({
            //   duration: 800,
            //   message: "数据已删除"
            // });
          }
          if (res.data.Code == 1) {
            this.$toast({
              duration: 800,
              message: res.data.Message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    ///*此函数用于，把数组平均分成4份。
    DivideArrayEquallyInto4Parts(originArr) {
       /*此函数用于，把数组平均分成4份。
        * originArr，带分割的数组。*/
      if (originArr.length >= 4) {
          let arr1, arr2, arr3, arr4;
          arr1 = originArr.slice(0, Math.round(originArr.length / 4));
          arr2 = originArr.slice(
          Math.round(originArr.length / 4),
          Math.round(originArr.length / 4) * 2
        );
        arr3 = originArr.slice(
          Math.round(originArr.length / 4) * 2,
          Math.round(originArr.length / 4) * 3
        );
        arr4 = originArr.slice(Math.round(originArr.length / 4) * 3);
        return [arr1, arr2, arr3, arr4];
        }       
    },

    ///api/User/GetFileCategories//获取文件类型
    GetFileCategories() {
      this.$axios({
        method: "get",
        url: "/api/User/GetFileCategories",
        params: {
          churchID: 1
        }
      })
        .then(res => {
          // debugger
          if (res.data.code === 0) {
            // debugger
            console.log(res.data.data);
            let arr = res.data.data;
            let arr1, arr2, arr3, arr4;
            // 序列赋值。
            [arr1, arr2, arr3, arr4] = this.DivideArrayEquallyInto4Parts(arr);
            // console.log(arr);
            console.log(arr1);
            this.CategorOne = arr1;
            console.log(arr2);
            this.CategorTwo = arr2;
            console.log(arr3);
            this.CategorTHre = arr3;
            console.log(arr4);
            this.CategorFour = arr4;
          }
          
          if (res.data.Code == 1) {
            this.$toast({
              duration: 800,
              message: res.data.Message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },

  mounted() {
    //计算页面的加载图片的宽度
    //  console.log(this.$refs.navItem);
    this.widths = this.$refs.navItem.offsetWidth / 2 - 10;  
    console.log(this.widths);
    // this.$router.go(0);
  },

  created() {
    this.$emit("header", true);
    this.$emit("footer", false);
    //获取banener
    this.GetBannerList();
    //获取获取首页显示文件
    this.GetFileInfoHomePageList();
    //获取获取首页分类数据id
    this.GetFileCategories();
  }
};

</script>


<style lang="less" scoped>
.nav-icon {
  background: #fff;
  text-align: center;
  padding-top: 10px;
  height: 80px;
  // position: fixed;
  width: 100%;
  z-index: 999;
  top: 40px;
  // border-bottom: 5px solid #ddd;
  box-shadow: 2px 2px 3px #aaaaaa;
  // padding-bottom: 10px;
}
.nav_item{
   background: #fff;
  // text-align: center;
  // padding-top: 20px;
  // height: 80px;
  // // position: fixed;
  width: 100%;
  // z-index: 999;
  // top: 40px;
  border-bottom: 1px solid #eee;
  // box-shadow: 2px 2px 3px #aaaaaa;
  // padding-bottom: 20px;
}

.icon-name {
  display: block;
  font-size: 12px;
  padding-top: 5px;
  color: black;
}

.fun-icon {
  padding: 5px;
}

.unsummit-motice {
  margin-top: 10px;
  margin-bottom: 10px;
}

.moticelist {
  margin-top: 10px;
}

.ImforL-Note span {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 10px;
}
.item-notes {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  // margin-left: 35px;
  font-size: 16px;
}
.moticeNote {
  margin-top: 150px;
  margin-bottom: 55px;
}
.svg-icon {
  // border: 10px solid #eee;
  border-radius: 50%;
}
.val_col_4 {
  line-height: 64px;
  text-align: center;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.lineText {
  // height: 36px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  // margin-top: 10px;
  // margin-bottom: 10px;
}

.lineText span {
  line-height: 30px;
  font-size: 14px;
  // background-color: #fff;
}

.lineText_Right {
  // float:right;
  text-align: end;
  padding-right: 20px;
  font-size: 12px;
  color: cadetblue;
  margin-top: 5px;
}

.lineText_left {
  padding-left: 10px;
  // margin-top: 10px;
  // margin-bottom: 10px;
}

.navocon{
  width: 40x;
  height:40px;
}

.iconlogo {
  // height:80x !important ;
  margin: 5px;
}

.iconame {
  // top: -10px;
  // z-index: 9999;
  position: relative;
  // background-color: #000;
  height: 20px;
  display: block;
  font-size: 12px;
  line-height: 20px;
  // font-family: "Courier New", Courier, monospace;
  color: #000;
  text-align: left;
  padding-left: 10px;
  margin-bottom: 5px;
  // opacity: 0.5;
}

.TextL {
  border-left: 5px solid #66CCCC;
  padding-left: 10px;
}

.TextMore {
  padding: 0 10px;
  // border-radius: 5px;
  font-size: 8px;
  color: #fff;
  background-color: #99CC33;
}
.imagess {
  width: 100%;
  height: 180px;
}
.head-title{
  margin-bottom: 20px;
}
.endFooter{
    text-align: center;
    font-size: 12px;
    margin-top: 20px;
}
.lineText_Donation{
  text-align: center;
}
.Donation{
  margin-top: 10px;
}
</style>



